<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用模板和插槽</title>
  </head>
  <template id="my-paragraph">
    <style>
      p {
        color: white;
        background-color: #666;
        padding: 5px;
      }
    </style>
    <!-- <p>我的段落</p> -->
    <p><slot name="my-text">我的默认文本</slot></p>
  </template>
  <body>
    <script>
      customElements.define(
        "my-paragraph",
        class extends HTMLElement {
          constructor() {
            super();
            let template = document.getElementById("my-paragraph");
            let templateContent = template.content;

            const shadowRoot = this.attachShadow({ mode: "open" });
            shadowRoot.appendChild(templateContent.cloneNode(true));
          }
        }
      );
    </script>
    <my-paragraph>
      <!--可以被插入到槽中的节点被称为 Slotable；已经插入到槽中的节点被称为 slotted。-->
      <!-- <span slot="my-text">让我们使用一些不同的文本！</span> -->
      <ul slot="my-text">
        <li>让我们使用一些不同的文本！</li>
        <li>In a list!</li>
      </ul>
    </my-paragraph>
  </body>
</html>
